import React, { PureComponent } from "react";
import {
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Platform,
  RefreshControl
} from "react-native";
import { safeAreaBottomHeight } from "../../util/AdapterUtil";
import actions from "../../models/actions";
import { connect } from "react-redux";
import NavigationBar from "../../components/navigationBar";
import image from "../../assets/image";
import NavigationService from "../../components/NavigationService";
import * as requestApi from "../../util/requestApi";
import {
  ClassicsHeader,
  SmartRefreshControl
} from "react-native-smartrefreshlayout";

/*我的余额*/
class MlimitScreen extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      creditAmount: "0", //额度多少
      fixedAmount: "0", //总额度多少
      useAmount: "0", //已经使用
      overdueAmount: "0", //逾期金额
      storeAmount: "0", //充值余额
      isRefreshing: false
    };
  }

  componentWillUnmount() {}

  componentDidMount() {
    this.getData();
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#F9F9F9" }}>
        <NavigationBar
          navigation={this.props.navigation}
          isBack={true}
          title={"我的额度"}
        />
        <ScrollView
          style={{ flex: 1, backgroundColor: "#F9F9F9" }}
          alwaysBounceVertical={true}
          refreshControl={
            Platform.OS == "ios" ? (
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={() => {
                  this._onRefresh();
                }}
                backgroundColor={"#F9F9F9"}
              />
            ) : (
              <SmartRefreshControl
                ref={ref => (this.rc = ref)}
                renderHeader={<ClassicsHeader primaryColor="#F9F9F9" />}
                onRefresh={() => {
                  this._onRefresh();
                }}
                enableLoadMore={false}
              />
            )
          }
        >
          <View
            style={{ width: "100%", height: 6, backgroundColor: "#F9F9F9" }}
          />
          {this._renderlimit()}

          <View
            style={{
              marginLeft: 15,
              marginRight: 15,
              height: 1,
              backgroundColor: "#ccc",
              transform: [{ scaleY: 0.5 }]
            }}
          />

          <View
            style={{
              padding: 10,
              backgroundColor: "#fff",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <TouchableOpacity
              style={{
                marginLeft: 15,
                marginRight: 15,
                flex: 1,
                backgroundColor: "#fff",
                justifyContent: "center",
                alignItems: "center"
              }}
              onPress={() => {
                NavigationService.navigate("MOrderListScreen");
              }}
            >
              <View style={{ flexDirection: "row", alignItems: "center" }}>
                <View
                  style={{ justifyContent: "center", alignItems: "center" }}
                >
                  <Text style={{ color: "#AAAAAA", fontSize: 14 }}>
                    已使用(元)
                  </Text>
                  <Text
                    style={{
                      marginTop: 10,
                      color: "#4A4A4A",
                      fontSize: 20
                    }}
                  >
                    {this.state.useAmount}
                  </Text>
                </View>
                <View style={{ flex: 1 }} />
                <Image
                  style={{ width: 20, height: 20 }}
                  source={image.ic_right_arrow}
                />
              </View>
            </TouchableOpacity>

            <View
              style={{
                width: 1,
                height: 30,
                backgroundColor: "#CCCCCC"
              }}
            />

            <View
              style={{
                marginLeft: 15,
                marginRight: 15,
                flex: 1,
                backgroundColor: "#fff",
                justifyContent: "center",
                alignItems: "center"
              }}
              // onPress={() => {
              //     NavigationService.navigate("MBillScreen", {
              //         tabIndex: 0,
              //     });
              // }}
            >
              <View style={{ flexDirection: "row", alignItems: "center" }}>
                <View
                  style={{ justifyContent: "center", alignItems: "center" }}
                >
                  <Text style={{ color: "#AAAAAA", fontSize: 14 }}>
                    逾期金额(元)
                  </Text>
                  <Text
                    style={{
                      marginTop: 10,
                      color: "#4A4A4A",
                      fontSize: 20
                    }}
                  >
                    {this.state.overdueAmount}
                  </Text>
                </View>
                {/*<View style={{ flex: 1 }} />*/}
                {/*<Image*/}
                  {/*style={{ width: 20, height: 20 }}*/}
                  {/*source={image.ic_right_arrow}*/}
                {/*/>*/}
              </View>
            </View>
          </View>

          <View
            style={{ width: "100%", height: 6, backgroundColor: "#F9F9F9" }}
          />

          {this._renderlimitTotal()}
          <View
            style={{ width: "100%", height: 6, backgroundColor: "#F9F9F9" }}
          />
          {this._renderchongzhi()}
          <View style={{ height: safeAreaBottomHeight }} />
        </ScrollView>
      </View>
    );
  }

  //下拉刷新
  _onRefresh = () => {
    this.setState({ isRefreshing: true });
    this.getData();

    // setTimeout(() => {
    // }, 1000);
  };

  _renderlimit = () => {
    return (
      <View
        style={{
          padding: 10,
          width: "100%",
          backgroundColor: "#fff",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Text style={{ marginTop: 10, color: "#AAAAAA", fontSize: 14 }}>
          可用额度(元)
        </Text>
        <Text
          style={{
            marginTop: 10,
            color: "#D0021B",
            fontSize: 25
          }}
        >
          {this.state.creditAmount}
        </Text>
      </View>
    );
  };

  _renderlimitTotal = () => {
    return (
      <View
        style={{
          padding: 10,
          width: "100%",
          backgroundColor: "#fff",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Text style={{ marginTop: 10, color: "#AAAAAA", fontSize: 14 }}>
          总额度(元)
        </Text>
        <Text
          style={{
            marginTop: 10,
            color: "#4A4A4A",
            fontSize: 25
          }}
        >
          {this.state.fixedAmount}
        </Text>
      </View>
    );
  };

  _renderchongzhi = () => {
    return (
      <View
        style={{
          padding: 10,
          width: "100%",
          backgroundColor: "#fff",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Text style={{ marginTop: 10, color: "#AAAAAA", fontSize: 14 }}>
          充值余额(元)
        </Text>
        <Text
          style={{
            marginTop: 10,
            color: "#4A4A4A",
            fontSize: 25
          }}
        >
          {this.state.storeAmount}
        </Text>
      </View>
    );
  };

  getData = () => {
    requestApi
      .getMylimit()
      .then(res => {
        this._finishRefresh();
        this.setState({
          creditAmount: res.creditAmount, //额度多少
          fixedAmount: res.fixedAmount, //总额度多少
          useAmount: res.useAmount, //已经使用
          overdueAmount: res.overdueAmount, //逾期金额
          storeAmount: res.storeAmount //充值余额
        });
      })
      .catch(err => {
        this._finishRefresh();
        Toast.show(err.msg, 1000);
      });
  };

  _finishRefresh = () => {
    Loading.hide(); //延时 0.2秒关闭
    this.setState({
      loading: false
    });
    Platform.OS == "ios"
      ? this.setState({ isRefreshing: false })
      : this.rc && this.rc.finishRefresh();
  };
}

/*{
	"companyId": 15,
	"companyName": "锦江区",
	"storeAmount": 1,
	"fixedAmount": 100000,
	"creditAmount": 99997,
	"useAmount": 3,
	"overdueAmount": 0
}*/

const styles = StyleSheet.create({});

export default connect(
  ({ userInfo }) => ({
    userInfo
  }),
  {
    getSearchListData: actions.getSearchListData
  }
)(MlimitScreen);
